<template>
    <div class="monitor-container">
        <!-- 顶部标题栏 -->
        <!-- <div class="header">
            <h1>光伏电站监控系统</h1>
            <div class="time-display">{{ currentTime }}</div>
        </div> -->

        <div class="main-content">
            <!-- 左侧信息面板 -->
            <!-- <div class="left-panel"> -->
            <!-- 电站基本信息 -->
            <!-- <div class="info-card">
                    <h3>拓方建材光伏电站</h3>
                    <div class="info-item">
                        <span class="label">地址：</span>
                        <span class="value">湖北省孝感市孝南区</span>
                    </div>
                    <div class="info-item">
                        <span class="label">装机总容量：</span>
                        <span class="value highlight">1600kWp</span>
                    </div>
                    <div class="info-item">
                        <span class="label">实时功率：</span>
                        <span class="value highlight">{{ realTimePower }}kW</span>
                    </div>
                    <div class="info-item">
                        <span class="label">日发电量：</span>
                        <span class="value highlight">{{ dailyGeneration }}度</span>
                    </div>
                    <div class="info-item">
                        <span class="label">日满发小时：</span>
                        <span class="value highlight">{{ dailyFullHours }}h</span>
                    </div>
                </div> -->

            <!-- 附近地点列表 -->
            <!-- <div class="location-list">
                    <h3>附近地点</h3>
                    <div class="location-group">
                        <h4>木家白庙</h4>
                        <ul>
                            <li>玉家湾</li>
                            <li>雅匠湾</li>
                            <li>航天万山特</li>
                            <li>南有限公司</li>
                            <li>大道</li>
                            <li>银湖科技企业总部基地</li>
                        </ul>
                    </div>
                    <div class="location-group">
                        <h4>东方佳林</h4>
                        <ul>
                            <li>黄钻集B</li>
                            <li>余家庙</li>
                            <li>S110</li>
                        </ul>
                    </div>
                    <div class="location-group">
                        <h4>其他地点</h4>
                        <ul>
                            <li>福泰成</li>
                            <li>吴家山</li>
                            <li>城星庙</li>
                            <li>上王家寨</li>
                            <li>京广线</li>
                            <li>王家巷</li>
                            <li>小万家湾</li>
                            <li>航天重型工程储备有限公司</li>
                            <li>S110工业园</li>
                            <li>周庙湾</li>
                        </ul>
                    </div>
                </div> -->
            <!-- </div> -->

            <!-- 中间地图区域 -->
            <div class="map-container">
                <div id="map" class="map"></div>
                <!-- 地图控制面板 -->
                <div class="map-controls">
                    <el-button @click="zoomIn" size="small" icon="el-icon-plus"></el-button>
                    <el-button @click="zoomOut" size="small" icon="el-icon-minus"></el-button>
                    <el-button @click="resetView" size="small">复位</el-button>
                </div>

                <!-- 标记点信息弹窗 -->
                <div v-if="showMarkerInfo" class="marker-info-window" :style="infoWindowStyle">
                    <div class="info-window-header">
                        <h4>{{ currentMarkerInfo.name }}</h4>
                        <el-button @click="closeInfoWindow" size="mini" icon="el-icon-close" circle></el-button>
                    </div>
                    <div class="info-window-content">
                        <div v-if="currentMarkerInfo.type === 'power_plant'" class="plant-info">
                            <div class="info-row">
                                <span class="label">装机容量：</span>
                                <span class="value">1600kWp</span>
                            </div>
                            <div class="info-row">
                                <span class="label">实时功率：</span>
                                <span class="value">{{ realTimePower }}kW</span>
                            </div>
                            <div class="info-row">
                                <span class="label">日发电量：</span>
                                <span class="value">{{ dailyGeneration }}度</span>
                            </div>
                            <div class="info-row">
                                <span class="label">运行状态：</span>
                                <span class="status running">正常运行</span>
                            </div>
                        </div>
                        <div v-else class="location-info">
                            <div class="info-row">
                                <span class="label">类型：</span>
                                <span class="value">{{ currentMarkerInfo.category }}</span>
                            </div>
                            <div class="info-row">
                                <span class="label">距离：</span>
                                <span class="value">{{ currentMarkerInfo.distance }}km</span>
                            </div>
                            <div class="info-row">
                                <span class="label">状态：</span>
                                <span class="status normal">正常</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧状态面板 -->
            <!-- <div class="right-panel">
                <div class="status-card">
                    <h3>系统状态</h3>
                    <div class="status-item">
                        <span class="status-label">运行状态</span>
                        <span class="status-value running">正常运行</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">通信状态</span>
                        <span class="status-value normal">正常</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">逆变器状态</span>
                        <span class="status-value normal">正常</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">环境监测</span>
                        <span class="status-value normal">正常</span>
                    </div>
                </div>

                <div class="data-card">
                    <h3>实时数据</h3>
                    <div class="data-chart">
                        <div class="chart-placeholder">
                            <p>功率曲线图</p>
                            <div class="chart-line"></div>
                        </div>
                    </div>
                    <div class="data-stats">
                        <div class="stat-item">
                            <span class="stat-label">今日发电</span>
                            <span class="stat-value">{{ dailyGeneration }} kWh</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">月累计</span>
                            <span class="stat-value">{{ monthlyGeneration }} kWh</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">年累计</span>
                            <span class="stat-value">{{ yearlyGeneration }} kWh</span>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script>
export default {
    name: 'SolarPlantMonitor',
    data() {
        return {
            currentTime: '',
            realTimePower: 157.67,
            dailyGeneration: 2712.19,
            dailyFullHours: 3.52,
            monthlyGeneration: 65890.45,
            yearlyGeneration: 325678.12,
            map: null,
            markers: [],
            timer: null,
            showMarkerInfo: false,
            currentMarkerInfo: {},
            infoWindowPosition: { x: 0, y: 0 },
            infoWindowTimer: null
        }
    },
    computed: {
        infoWindowStyle() {
            return {
                left: `${this.infoWindowPosition.x}px`,
                top: `${this.infoWindowPosition.y}px`,
                display: this.showMarkerInfo ? 'block' : 'none'
            }
        }
    },
    mounted() {
        this.updateTime();
        this.timer = setInterval(this.updateTime, 1000);

        // 初始化地图
        this.$nextTick(() => {
            this.initMap();
        });
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer);
        }
        if (this.infoWindowTimer) {
            clearTimeout(this.infoWindowTimer);
        }
    },
    methods: {
        updateTime() {
            const now = new Date();
            this.currentTime = now.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
        },

        initMap() {
            // 检查是否已加载高德地图API
            if (typeof AMap === 'undefined') {
                // 动态加载高德地图API
                const script = document.createElement('script');
                script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=7a2c5975ff40c914a69bd02287f981a2&plugin=AMap.ToolBar,AMap.Scale';
                script.onload = () => {
                    this.createMap();
                };
                document.head.appendChild(script);
            } else {
                this.createMap();
            }
        },

        createMap() {
            // 创建地图实例
            this.map = new AMap.Map('map', {
                zoom: 14,
                center: [114.058, 30.948], // 孝感市坐标
                viewMode: '3D'
            });

            // 添加控件
            this.map.addControl(new AMap.ToolBar());
            this.map.addControl(new AMap.Scale());

            // 添加标记点
            this.addMarkers();
        },

        addMarkers() {
            // 电站位置 - 使用自定义图标
            const plantMarker = new AMap.Marker({
                icon: new AMap.Icon({
                    image: require('../../assets/images/map_icon.png'),
                    size: new AMap.Size(55, 52),
                    imageSize: new AMap.Size(55, 52)
                }),
                position: [114.058, 30.948],
                title: '拓方建材光伏电站',
                // content: this.createMarkerContent('电站', '#ff6b6b', 'plant'),
                offset: new AMap.Pixel(-25, -60)
            });

            // 绑定鼠标事件
            plantMarker.on('mouseover', (e) => {
                this.showMarkerInfoWindow(e, {
                    name: '拓方建材光伏电站',
                    type: 'power_plant',
                    position: [114.058, 30.948]
                });
            });

            plantMarker.on('mouseout', () => {
                this.startCloseTimer();
            });

            // 附近地点标记
            const locations = [
                { name: '木家白庙', position: [114.045, 30.955], category: '居民区', distance: 1.2 },
                { name: '东方佳林', position: [114.068, 30.942], category: '商业区', distance: 1.5 },
                { name: '福泰成', position: [114.052, 30.935], category: '商业区', distance: 0.8 },
                { name: '吴家山', position: [114.042, 30.938], category: '居民区', distance: 1.1 },
                { name: '航天重型工程储备有限公司', position: [114.075, 30.952], category: '工业区', distance: 2.3 },
                { name: 'S110工业园', position: [114.062, 30.932], category: '工业区', distance: 1.8 },
                { name: '银湖科技企业总部基地', position: [114.048, 30.962], category: '科技园区', distance: 1.7 },
                { name: '黄钻集B', position: [114.072, 30.945], category: '商业区', distance: 1.6 }
            ];

            locations.forEach(location => {
                const marker = new AMap.Marker({
                    icon: new AMap.Icon({
                        image: require('../../assets/images/map_icon.png'),
                        size: new AMap.Size(55, 52),
                        imageSize: new AMap.Size(55, 52)
                    }),
                    position: location.position,
                    title: location.name,
                    // content: this.createMarkerContent(location.name, '#4dabf7', 'location'),
                    offset: new AMap.Pixel(-25, -60)
                });

                // 绑定鼠标事件
                marker.on('mouseover', (e) => {
                    this.showMarkerInfoWindow(e, {
                        name: location.name,
                        type: 'location',
                        category: location.category,
                        distance: location.distance,
                        position: location.position
                    });
                });

                marker.on('mouseout', () => {
                    this.startCloseTimer();
                });

                this.markers.push(marker);
            });

            // 将标记添加到地图
            this.map.add([plantMarker, ...this.markers]);
        },

        createMarkerContent(name, color, type) {
            const iconType = type === 'plant' ? '⚡' : '📍';
            return `
        <div class="custom-marker" style="background-color: ${color};">
          <div class="marker-icon">${iconType}</div>
          <div class="marker-text">${name}</div>
        </div>
      `;
        },

        showMarkerInfoWindow(event, markerInfo) {
            if (this.infoWindowTimer) {
                clearTimeout(this.infoWindowTimer);
            }

            // 获取鼠标位置
            const pixel = this.map.lngLatToContainer(event.lnglat);
            this.infoWindowPosition = {
                x: pixel.x + 10,
                y: pixel.y - 10
            };

            this.currentMarkerInfo = markerInfo;
            this.showMarkerInfo = true;
        },

        startCloseTimer() {
            this.infoWindowTimer = setTimeout(() => {
                this.showMarkerInfo = false;
            }, 300);
        },

        closeInfoWindow() {
            this.showMarkerInfo = false;
        },

        zoomIn() {
            if (this.map) {
                this.map.zoomIn();
            }
        },

        zoomOut() {
            if (this.map) {
                this.map.zoomOut();
            }
        },

        resetView() {
            if (this.map) {
                this.map.setZoomAndCenter(14, [114.058, 30.948]);
            }
        }
    }
}
</script>

<style scoped>
.monitor-container {
    height: 68vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f7fa;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background-color: #2c3e50;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
}

.time-display {
    font-size: 14px;
}

.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.left-panel,
.right-panel {
    width: 300px;
    padding: 16px;
    overflow-y: auto;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.map-container {
    flex: 1;
    position: relative;
    margin: 10px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.map {
    width: 100%;
    height: 100%;
}

.map-controls {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
}

/* 标记点信息窗口样式 */
.marker-info-window {
    position: absolute;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 280px;
    max-width: 320px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.info-window-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px 8px 0 0;
}

.info-window-header h4 {
    margin: 0;
    font-size: 16px;
}

.info-window-content {
    padding: 16px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
}

.info-row .label {
    color: #666;
}

.info-row .value {
    color: #333;
    font-weight: 500;
}

.status {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.running {
    background-color: #e8f5e8;
    color: #27ae60;
}

.normal {
    background-color: #e8f4fd;
    color: #3498db;
}

/* 自定义标记点样式 */
.custom-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    transform: translate(-50%, -100%);
}

.custom-marker:hover {
    transform: translate(-50%, -100%) scale(1.1);
    z-index: 1001;
}

.marker-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.marker-text {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.info-card,
.status-card,
.data-card {
    background-color: white;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-card h3,
.status-card h3,
.data-card h3 {
    margin-top: 0;
    margin-bottom: 16px;
    color: #2c3e50;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
}

.label {
    color: #666;
}

.value {
    color: #333;
    font-weight: 500;
}

.highlight {
    color: #e74c3c;
    font-weight: bold;
}

.location-list h3 {
    margin-top: 0;
    color: #2c3e50;
    font-size: 16px;
}

.location-group {
    margin-bottom: 16px;
}

.location-group h4 {
    margin: 0 0 8px 0;
    color: #3498db;
    font-size: 14px;
}

.location-group ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.location-group li {
    padding: 4px 0;
    font-size: 13px;
    color: #555;
    border-bottom: 1px dashed #eee;
}

.status-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
}

.status-label {
    color: #666;
}

.status-value {
    font-weight: 500;
}

.data-chart {
    height: 150px;
    margin-bottom: 16px;
    background-color: #f8f9fa;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-placeholder {
    text-align: center;
    color: #999;
}

.chart-line {
    width: 200px;
    height: 60px;
    background: linear-gradient(to right, #3498db, #2ecc71);
    opacity: 0.7;
    border-radius: 2px;
    margin-top: 10px;
}

.data-stats {
    border-top: 1px solid #eee;
    padding-top: 16px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
}

.stat-label {
    color: #666;
}

.stat-value {
    color: #333;
    font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 1200px) {

    .left-panel,
    .right-panel {
        width: 250px;
    }
}

@media (max-width: 992px) {
    .main-content {
        flex-direction: column;
    }

    .left-panel,
    .right-panel {
        width: 100%;
        height: auto;
    }

    .map-container {
        height: 400px;
    }

    .marker-info-window {
        min-width: 250px;
        max-width: 280px;
    }
}
</style>